<template>
  <div class="form-config-container">
    <a-form label-position="top">
      <a-form-item label="表单布局方式">
        <a-radio-group v-model="data.formLayout" button-style="solid">
          <a-radio-button value="horizontal"> 水平显示 </a-radio-button>
          <a-radio-button value="vertical"> 垂直显示 </a-radio-button>
          <a-radio-button value="inline"> 行显示 </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="标签对齐方式">
        <a-radio-group v-model="data.labelPosition" button-style="solid">
          <a-radio-button value="left"> 左对齐 </a-radio-button>
          <a-radio-button value="right"> 右对齐 </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="标签宽度">
        <a-row class="form-set-li">
          <label>栅格占位格数</label>
          <a-input-number v-model="data.labelCol.span" :min="0" :max="24" :step="1"></a-input-number>
        </a-row>
        <a-row class="form-set-li">
          <label>栅格左侧的间隔格数</label>
          <a-input-number v-model="data.labelCol.offset" :min="0" :max="24" :step="1"></a-input-number>
        </a-row>
      </a-form-item>

      <a-form-item label="控件宽度">
        <a-row class="form-set-li">
          <label>栅格占位格数</label>
          <a-input-number v-model="data.wrapperCol.span" :min="0" :max="24" :step="1"></a-input-number>
        </a-row>
        <a-row class="form-set-li">
          <label>栅格左侧的间隔格数</label>
          <a-input-number v-model="data.wrapperCol.offset" :min="0" :max="24" :step="1"></a-input-number>
        </a-row>
      </a-form-item>

      <a-form-item label="组件尺寸">
        <a-radio-group v-model="data.size" button-style="solid">
          <a-radio-button value="large">large</a-radio-button>
          <a-radio-button value="default">default</a-radio-button>
          <a-radio-button value="small">small</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {}
  }
}
</script>
